<template>
	<view class="search">
		
		<input type="text" @confirm="searchval" v-model="values" focus placeholder="请输入书名">
		<image @click="searchval" src="@/static/search.png"></image>
	</view>
	<view class="content" v-if="datas.data.length>0">
			<view class="imgContext" v-for="(item,index) in datas.data" :key="index">
				<view class="img">
					<image  @click="getxiangqing(item.id)" :src="item.img"  @error="imgerror(index)"></image>
				</view>
				<view class="text1">
					{{item.title}}
				</view>
				<view class="text2">
					{{item.content}}
				</view>
			</view>
	</view>
	<view v-if="isShowZhiyin">
	<view class="hotSearch" v-if="history.data.length>0" >
		<view class="active">热门搜索</view>
		<view v-for="(item,index) in history.data" :key="index">
			{{item.name}}
		</view>
	</view>
	<view class="hotSearch" v-if="hotTuijiandata.data.length>0">
		<view class="active">热门搜索</view>
		<view v-for="(item,index) in hotTuijiandata.data" :key="index" @click="changeVal(item.name)">
			<text :style="`background-color:${item.color} ;`">{{index}}</text> {{item.name}}
		</view>
	</view>
	</view>
</template>

<script setup>
import { reactive, ref } from "vue";
import {searchdata,hotTuijian} from '@/api/api.js'
import {useStore} from 'vuex';
let store = useStore()
	let isShowZhiyin =ref(true)
	let values = ref('')
	let datas = reactive({
		data:[]
	})
	let history = reactive({
		data:[]
	})
	const searchval = ()=>{
		datas.data=[]
		if(values.value !=''){
			isShowZhiyin.value = false
			searchdata(values.value).then(res=>{
				
						datas.data=res.data.data
						if(datas.data.length>0){
							
						}else{
							isShowZhiyin.value = true
							uni.showToast({
								title:'没有相关内容'
							})
						}
			})
		}
	}
	
	const getxiangqing = (id) => {
		console.log(id);
		store.commit('updatexiangqing',id)
		uni.navigateTo({
			url:'/pages/xiangqing/xiangqing'
		});
	}
	const imgerror = (i)=>{
		
		datas.data[i].cover ='http://175.178.117.99:8888/down/j88nTwRP3Ykn.png'
	}
	const changeVal = (val)=>{
		values.value = val
		searchval()
	}
	let hotTuijiandata = reactive({
		data:[]
	})
	hotTuijian().then(res =>{
		res.data[0].color = '#f50f50'
		res.data[1].color = '#d5c650'
		res.data[2].color = '#818f6e'
		res.data[3].color = '#dadada'
		res.data[4].color = '#dadada'
		hotTuijiandata.data = res.data
	})
</script>

<style lang="scss" scoped>
.search {
		display: flex;
		flex-wrap: nowrap;
		margin: 25rpx;
		height: 90rpx;
		width: 700rpx;
		align-items: center;

		input {
			width: 700rpx;
			background-color: #ffffff;
			height: 90rpx;
			box-shadow: 5rpx 5rpx 10rpx 10rpx #f8f8f8;
			padding-left: 20rpx;
			box-sizing: border-box;
			flex-shrink: 0;
			border-radius: 15rpx;
		}

		image {
			flex-shrink: 0;
			width: 70rpx;
			height: 70rpx;
			position: relative;
			left: -110rpx;
			top: 0;
		}
	}
	.content{
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 40rpx;
		>view{
			margin-top: 30rpx;
			.img{
				box-shadow:rgba(0,0,0,.2)  0 1px 5px 0px;
			}
			image{
				width: 200rpx;
				height: 300rpx;
			}
			.text1{
				width: 200rpx;
				font-size: 28rpx;
				color: $color3;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //行数需设置
				line-clamp: 3;
				-webkit-box-orient: vertical;
				margin-top: 10rpx;
			}
			.text2{
				width: 200rpx;
				font-size: 24rpx;
				color: $color3;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //行数需设置
				line-clamp: 3;
				-webkit-box-orient: vertical;
				margin-top: 10rpx;
			}
		}
		
	}
	.hotSearch{
		width: 700rpx;
		margin:0 auto;
		margin-top: 50rpx;
		>view{
			width: 600rpx;
			line-height: 60rpx;
			display: inline-block; 
			white-space: nowrap; 
			overflow: hidden; 
			text-overflow: ellipsis; 
			margin-top: 10rpx;
			padding-left: 30rpx;
			display: flex;
			align-content: center;
			
		}
		.active{
			color: #f50f50;
			width: 700rpx;
			padding-left: 0rpx;
		}
		text{
			display: block;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 30rpx;
			font-size: 24rpx;
			color: #ffffff;
			margin-top: 15rpx;
			flex-shrink: 0;
			margin-right: 40rpx;
		}
	}
</style>
